<template>
  <view class="product-info-block">
    <view class="product-info-header">
      <view class="title">
        问大家
      </view>
      <!-- <view class="more-button">
        <wd-icon
          name="arrow-right"
          size="16rpx"
          color="#999999"
        />
      </view> -->
    </view>
    <view class="divider" />
    <view class="product-question-item">
      <view class="fake-icon">
        问
      </view>
      <view class="question-text">
        请问这个产品有什么功效？
      </view>
      <view class="answer-text">
        1个回答
      </view>
    </view>
    <view class="product-question-item">
      <view class="fake-icon">
        问
      </view>
      <view class="question-text">
        请问这个产品有什么功效？
      </view>
      <view class="answer-text">
        1个回答
      </view>
    </view>
    <view class="product-question-item">
      <view class="fake-icon">
        问
      </view>
      <view class="question-text">
        请问这个产品有什么功效？
      </view>
      <view class="answer-text">
        1个回答
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  product: SpuVO;
}>();
</script>

<style lang="scss" scoped>
.product-info-block {
  position: relative;
  margin: 0 24rpx 24rpx;
  padding: 18rpx 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rpx;

  .product-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50rpx;
    .title {
      font-size: 32rpx;
      font-weight: bold;
    }
    .more-button {
      display: flex;
      align-items: center;
      gap: 6rpx;
      .label {
        font-size: 24rpx;
        color: #999999;
        flex-shrink: 0;
      }
    }
  }

  .divider {
    height: 1px;
    background-color: #eeeeee;
  }

  .product-question-item {
    margin-top: 12rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;
    .fake-icon {
      height: 40rpx;
      width: 40rpx;
      background-color: rgba(255, 47, 59, 0.04);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ff2f3b;
      font-size: 24rpx;
      font-weight: bold;
    }
    .question-text {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
    }
    .answer-text {
      font-weight: 300;
      color: #999999;
    }
  }
}
</style>
